<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div class="details_Header">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">订单信息</span>
        </div>
        <div class="deleted_OrderHeader">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单号：</span>
              <span class="deleted_OrderTitle">{{details.sn}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">交易单号：</span>
              <span class="deleted_OrderTitle">{{detailsbox.paymentSn == ''?detailsbox.paymentSn:'--'}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单状态：</span>
              <span class="deleted_OrderTitle">{{details.orderStatus | watchStatus}}</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">下单时间：</span>
              <span class="deleted_OrderTitle">{{details.createDate | datetimeFormatter}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">支付方式：</span>
              <span class="deleted_OrderTitle">微信支付</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">渠道来源：</span>
              <span class="deleted_OrderTitle">--</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">支付时间：</span>
              <span class="deleted_OrderTitle">{{details.paymentDate | datetimeFormatter}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">结算时间：</span>
              <span class="deleted_OrderTitle">{{details.settlingDate | datetimeFormatter}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">营销活动：</span>
              <span class="deleted_OrderTitle">{{details.promotion == ''?details.promotion:'--'}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">分销信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">一级分销员：</span>
                <!--                <img class="deleted_logo" :src="img">-->
                <span class="deleted_OrderName">{{detailsbox.promoter1 == ''?detailsbox.promoter1:'--'}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">二级分销员：</span>
                <!--                <img class="deleted_logo" :src="img">-->
                <span class="deleted_OrderName">{{detailsbox.promoter2 == ''?detailsbox.promoter2:'--'}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">分成金额：</span>
              <span class="deleted_OrderTitle">￥{{details.rebate1 == ''?details.rebate1:'--'}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">分成金额：</span>
              <span class="deleted_OrderTitle">￥{{details.rebate2 == ''?details.rebate2:'--'}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">报名信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">用户姓名：</span>
                <span class="deleted_OrderName">{{details.nickName}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="height: 40px;display: flex;align-items: center">
                <span class="deleted_Row_Headings">联系电话：</span>
                <span class="deleted_OrderTitle">{{details.phone}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="border: 1px solid #f2f2f2;margin-top: 40px">
          <div class="table_Header">
            <el-row :gutter="24">
              <el-col :span="5">
                <div class="justify_left">
                  <span class="table_HeaderTitle">活动名称</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="align_items">
                  <span class="table_HeaderTitle">报名费（元）</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="align_items">
                  <span class="table_HeaderTitle">优惠价（元）</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="align_items">
                  <span class="table_HeaderTitle">数量</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="align_items">
                  <span class="table_HeaderTitle">分成</span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="align_items">
                  <span class="table_HeaderTitle">总收益（元）</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="padding: 10px">
            <el-row :gutter="24">
              <el-col :span="5">
                <div class="justify_left shop_Height">
                  <img style="width: 60px;height: 45px" :src="details.thumbnail">
                  <span style="margin-left: 10px" class="table_ContentTitle">{{details.title}}</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="align_items shop_Height">
                  <span class="table_ContentTitle">{{details.price}}</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="align_items shop_Height">
                  <span class="table_ContentTitle">{{details.discount}}</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="align_items shop_Height">
                  <span class="table_ContentTitle">1</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="align_items shop_Height">
                  <span class="table_ContentTitle">{{rebate}}</span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="align_items shop_Height">
                  <span class="table_ContentTitle">{{earnings}}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="width: 100%;display: flex;justify-content: flex-end;align-items: center;margin-top: 20px">
          <span class="table_ContentTitle">订单合计1件商品，实付：¥{{total}}</span>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script>
  import { find } from '@/api/enrollOrder'
  import utils from '../../utils/utils.js'
  export default {
    naem:'enrollOrder-details',
    data() {
      return {
        details:'',
        detailsbox:'',
        rebate:'',
        earnings:'',
        total:''
      }
    },
    filters:{
      watchStatus(val){
        if (val == 0){
          return '未确认'
        } else if (val == 1){
          return '已确认'
        } else if (val == 2){
          return '已完成'
        } else if (val == 3){
          return '已取消'
        }

      }
    },
    created(){
      find(this.$route.query.id).then(response => {
        console.log(response)
        if(utils.isNull(response.data.enrollOrder.discount)){
          response.data.enrollOrder.discount = 0
        }
        this.details = response.data.enrollOrder;
        this.detailsbox = response.data;
        this.details.thumbnail = utils.thumbnail(this.details.thumbnail,120,90);
        this.rebate = response.data.enrollOrder.rebate1 + response.data.enrollOrder.rebate2 +response.data.enrollOrder.rebate3;
        this.earnings = response.data.enrollOrder.price - this.rebate;
        this.total = response.data.enrollOrder.price - response.data.enrollOrder.discount;
      }).catch(error => {

      })
    },
    methods:{

    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-size: 16px;
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
    font-size: 14px;
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .table_Header {
    width: 100%;
    background-color: #f5f7fa;
    padding: 10px;
  }
  .table_HeaderTitle {
    font-size: 12px;
    color: #353535;
    font-weight: 600;
  }
  .align_items {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .justify_left {
    display: flex;
    align-items: center;
  }
  .justify_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .table_ContentTitle {
    font-size: 12px;
    color: #353535;
  }
  .shop_Height {
    min-height: 60px;
  }
  .deleted_Row_Headings{
    font-size: 14px;
    color: #666666;
    width: 85px;
  }
  .deleted_OrderName {
    font-size: 14px;
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
